//轮播图切换
let arr = [
  { x: -64, s: 0.83, z: 1 },
  { x: 140, s: 1, z: 2 },
  { x: 338, s: 0.83, z: 1 },
  { x: 960, s: 0.83, z: 1 },
  { x: 960, s: 0.83, z: 1 },
  { x: 960, s: 0.83, z: 1 }
];
function render() {
  //1.获取所有轮播图
  let swiperObjs = document.querySelectorAll(".swiper .swiper-slide ");
  //2.遍历加行内样式
  swiperObjs.forEach((item, i) => {
    //item就是每个swiper-slide标签对象
    item.style.transform = `translateX(${arr[i].x}px) scale(${arr[i].s})`;
    item.style.zIndex = arr[i].z;
  });
}
//首次自我调用
render();
function next() {
  //1. 从数组中弹出最后一个值
  var temp = arr.pop();

  //2. 将弹出的值加到数组头部，组成第一个值
  arr.unshift(temp);
  //3. 重新渲染遍历
  render();
}
document.querySelector(".swiper .swiper-next").onclick = next;

function prev() {
  //1. 从数组前面弹出一个值
  var temp = arr.shift();
  //2. 将弹出的值push到数组后面
  arr.push(temp);
  //3. 重新渲染
  render();
}
document.querySelector(".swiper .swiper-prev").onclick = prev;

//点击图片切换
document.querySelector(".swiper .swiper-wrapper").onclick = function(evt) {
  //获取事件对象
  let e = evt || window.event;
  let target = e.target || e.srcElement;
  if (target.parentNode.style.transform.includes("64px")) {
    prev();
  }
  if (target.parentNode.style.transform.includes("338px")) {
    next();
  }
};
